<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 400px;height: 400px;background-color:blanchedalmond;
    }
    </style>
</head>
<body>
   <div></div> 
   <script>
       // 添加
    // box.addEventListener("click", a);  //常规
    // box.attachEvent("onclick", a); // IE

    // 删除
    // box.removeEventListener("click", a);  //常规
    // box.detachEvent("onclick", a); // IE
    
    // 增加事件监听的函数封装
    function addEvent(ele, eventType, handleFn) {
        if (ele.addEventListener) {
            ele.addEventListener(eventType, handleFn);  //常规
        } else {
            ele.attachEvent("on" + eventType, handleFn); // IE
        }
    }

    //  删除事件监听的函数封装
    function removeEvent(ele, eventType, handleFn) {
        if (ele.removeEventListener) {
            ele.removeEventListener(eventType, handleFn);  //常规
        } else {
            ele.detachEvent("on" + eventType, handleFn); // IE
        }
    }
    var box=document.getElementsByTagName("div")[0]
    box.addEventListener("click",a)
    box.addEventListener("click",b)
    function a(){
        console.log("第一个监听事件")
    }
    function b(){
        console.log("第二个监听事件")
    }
    box.removeEventListener("click",a)
   </script>
</body>
</html>